<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar></v-sidebar>
        <div class="content-box" :class="{'content-collapse':collapse}">
            <v-tags></v-tags>
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
            </div>
        </div>
        <el-dialog title="密码修改" :visible.sync="isShow" v-dialogDrag :before-close="handleClose">
            <el-form ref="form" :model="form">
                <!-- <el-form-item label="原密码" :label-width="formLabelWidth">
                    <el-input show-password v-model="form.old_password" autocomplete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="新密码" :label-width="formLabelWidth">
                    <el-input show-password v-model="form.new_password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth">
                    <el-input show-password v-model="form.check_password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="hideDailog">取 消</el-button>
                <el-button type="primary" @click="subForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import vHead from "./Header.vue";
import vSidebar from "./Sidebar.vue";
import vTags from "./Tags.vue";
import bus from "./bus";
import {mapGetters} from "vuex";
import {mapActions} from "vuex";

export default {
    data() {
        return {
            tagsList: [],
            collapse: false,
            form: {
                // old_password: '',
                new_password: '',
                check_password: '',
            },
            formLabelWidth: '120px',
        };
    },
    computed: {
        ...mapGetters("dailog", {
            isShow: "isShow"
        })
    },
    methods: {
        ...mapActions("dailog", ["hideDailog", "showDailog"]),
        handleClose() {
            this.hideDailog();
        },
        subForm() {
            
            if (this.form.new_password == '' || this.form.new_password == undefined) {
                return this.$message.error('请填写新密码');
            }
            if (this.form.check_password == '' || this.form.check_password == undefined) {
                return this.$message.error('请填写确认密码');
            }
            if(this.form.new_password != this.form.check_password){
                return this.$message.error('新密码和确认密码不一致');
            }
            let params = {
                admin_id:localStorage.getItem("userid"),
                new_password: this.form.new_password,
                check_password: this.form.check_password
            }
            this.$post(this.$api.adupdatePassword, params).then(res => {
                if (res.code == 200) {
                    this.$message.success('修改成功！');
                    this.hideDailog();
                    localStorage.removeItem("token");
                    this.$router.push("/login");
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
    components: {
        vHead,
        vSidebar,
        vTags
    },
    created() {
        bus.$on("collapse", msg => {
            this.collapse = msg;
        });

        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on("tags", msg => {
            let arr = [];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        });
    }
};
</script>
